<template>
	<view class="modal-container" :style="bg">
		<view class="row1">
			<text class="row1-text font-ALIMAMASHUHEITIBOLD">发现新版本</text>
			<text class="row1-text font-PingFangMedium">V1.2.3</text>
		</view>
		<view class="row2 font-PingFangMedium">
			是否升级到v1.2.3版本？
		</view>
		<view class="row3 font-PingFangMedium">
			新版本大小：203.02MB
		</view>
		<view class="center-block ss-flex ss-flex-col ss-col-center">
			<view class="title font-PingFangMedium">
				【朱雀兽】v1.2.3版本更新公告！
			</view>
			<view class="sub-title font-PingFangMedium">
				朱雀兽模块
			</view>
			
			<ul class="font-PingFangMedium">
				<li>通过朱雀皮肤智能组件所获得的皮肤，在皮肤详情内显示组件SN码；</li>
				<li>穿上隐藏款皮肤的朱雀将变成金色皮肤，并增加“藏”字标识。</li>
			</ul>
			
		</view>
		<button class="update-btn font-AlibabaPuHuiTiSemiBold" @tap="$emit('update')">立即更新</button>
		<image class="cancel" 
		:src="sheep.$url.static('/assets/img/about-modal-cancel.png')" 
		mode="aspectFill"
		@tap="$emit('cancel')"
		></image>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	const bg = {
		background: `rgba(0,0,0,0.6) url(${sheep.$url.static(
			'/assets/img/setting-about-modal.png'
		)}) no-repeat center 40%/ 750rpx 1174rpx`
	}
</script>

<style lang="scss" scoped>
	.modal-container{
		position: absolute;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.6);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		.row1{
			margin: 466rpx 0 0 116rpx;
			.row1-text:nth-child(1){
				white-space: nowrap;
				height: 34rpx;
				font-weight: bold;
				font-size: 48rpx;
				color: #232323;
				line-height: 34rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.row1-text:nth-child(2){
				margin-left: 16rpx;
				white-space: nowrap;
				height: 34rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #232323;
				line-height: 34rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
		.row2{
			margin: 24rpx 0 0 110rpx;
			white-space: nowrap;
			height: 34rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.row3{
			margin: 6rpx 0 24rpx 110rpx;
			white-space: nowrap;
			height: 34rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.center-block{
			margin: 0 auto;
			width: 530rpx;
			height: 442rpx;
			background: #8B89E81A;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding-top: 50rpx;
			box-sizing: border-box;
			.title{
				white-space: nowrap;
				height: 34rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.sub-title{
				white-space: nowrap;
				height: 54rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 54rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				align-self: self-start;
				margin: 32rpx 0 0 40rpx;
			}
			
				ul{
					padding-inline-start: 40rpx;
					margin: 0 40rpx 0 40rpx;
					width: 450rpx;
					box-sizing: border-box;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					overflow: hidden;
					li{
						margin-top: 18rpx;
					}
				}
				
		}
		.update-btn{
			margin-top: 50rpx;
			width: 494rpx;
			height: 100rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			background: #5350F1;
			color:  #FFF;
			text-align: center;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 900;
			line-height: 100rpx;
		}
		.cancel{
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
			display: block;
			margin-top: 88rpx;
		}
	}  
</style>
